<template>
    <ul class="context-menu-container">
        <li @click="onRefreshClick">刷新</li>
        <li @click="onCloseRight">关闭右侧</li>
        <li @click="onCloseOther">关闭其他</li>
    </ul>
</template>

<script setup>
// tag标签右键菜单组件
import {defineProps} from 'vue'
import {useRouter} from 'vue-router'
import { userappStore } from "@/store/app.js";
const AppStore = userappStore()
const router = useRouter()
const props = defineProps({
    index:{
    type:Number,
    require:true
}
})

// 刷新
const onRefreshClick = ()=>{
    router.go(0)
}
// 关闭右侧
const onCloseRight = ()=>{
    AppStore.removeTagsViewList(2,props.index)
    router.push(AppStore.tagsViewList[AppStore.tagsViewList.length-1].path)
}
// 关闭其他
const onCloseOther = ()=>{
    AppStore.removeTagsViewList(1,props.index)
    router.push(AppStore.tagsViewList[0].path)
}
</script>


<style lang="scss">
.context-menu-container{
    position: fixed;
    background-color: #fff;
    z-index: 3000;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0,0,0,0.3);
    li{
        margin: 0;
        padding: 7px 16px;
        cursor: pointer;
        &:hover{
            background-color: #eee;
        }
    }
}
</style>